<template>
	<view>
		<view class="job-dtl-box">
			<view class="common-tips-box">
				<view class="t1">{{id ? '编辑':'添加'}}兼职期望</view>
				<view class="t2">求职期望的不同，推荐的职位也会不同</view>
			</view>
			<view class="dtl-box">
				<view class="job-box">
					<view class="tit">兼职时间</view>
					<view class="dtl-time-box">
						<myDatePicker placeholder='开始时间' @pickerChange="handleStartDateChange"></myDatePicker>
						<text class="jiange">—</text>
						<myDatePicker placeholder='结束时间' :defaultSelect='false' @pickerChange="handleEndDateChange"></myDatePicker>
					</view>
				</view>
				<view class="job-box">
					<view class="tit">兼职薪资</view>
					<view class="dtl-input-box">
						<input :class="{'tips-txt': !detail.salary}" bindinput="inputUpdateDataFn" placeholder="请输入兼职薪资" v-model="detail.salary"></input>
					</view>
				</view>
				<view class="job-box">
					<view class="tit">{{detail.type ? '' : '不'}}兼职汽修行业</view>
					<view class="dtl-input-box">
						<switch class="wx-switch-input" v-model="detail.type" @change="switch1Change" />
					</view>
				</view>
				<view class="job-box">
					<view class="tit">期望职位</view>
					<navigator hover-class="hoverClass2" url="/pages/recruit/position-model/index">
						<view :class="{'tips-txt': !detail.position}">
							{{ detail.position || '请选择期望职位'}}
							<text class="iconfontPT iconxiayibu pull-right"></text>
						</view>
					</navigator>
				</view>
				<view class="job-box">
					<view class="tit">其他需求</view>
					<navigator hover-class="hoverClass2" @click="handleSendTxt" data-key="moreDemand" url="/pages/recruit/edit-self-ev/index?type=moreDemand">
						<view :class="{'tips-txt': !moreDemand}">
							<view class="txtHidden txt-view">
								{{ moreDemand || '请输入其他需求'}}
							</view>
							<text class="iconfontPT iconxiayibu pull-right"></text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<btnTpl @confirmEvent="handleSubmitData">保存</btnTpl>
	</view>
</template>

<script>
	import myDatePicker from '../../components/public/my-date-picker.vue'
	import btnTpl from '../../components/recruit/btn-tpl.vue'
	import {
		getFreeDtlInfo,
		setExpectDtlInfo
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				moreDemand: '',
				hideTime: false,
				detail: {
					type: true,
					time: {
						startDate: '',
						endDate: ''
					},
					position: '',
					salary: '',
				},
				rules: {
					"time.startDate": [{
						required: true,
						message: '请选择开始时间',
					}],
					"time.endDate": [{
						required: true,
						message: '请选择结束时间',
					}],
					salary: [{
						required: true,
						message: '请输入兼职薪资',
					}, {
						min: 2,
						max: 30,
						message: '兼职薪资字符长度在 2 到 30 个字符',
					}],
					position: [{
						required: true,
						message: '请选择期望职位',
					}],
					"moreDemand": [{
						required: true,
						message: '请简单填写其他需求',
					}, {
						min: 2,
						max: 140,
						message: '需求字符长度在 2 到 140 个字符',
					}],
				}
			}
		},
		components: {
			btnTpl,
			myDatePicker
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.initDataFn();
			}
		},
		methods: {
			initDataFn() {
				let _this = this;
				getFreeDtlInfo({
					id: _this.id
				}).then(res => {
					if (res.code == 1) {
						res.data.type = res.data.type == 3 ? 1 : 0;
						res.data.time = {
							startDate: res.data.s_time,
							endDate: res.data.e_time
						}
						_this.detail = res.data
						_this.moreDemand = res.data.describe

					}
				})
			},
			handleStartDateChange(startDate) {
				this.detail.time.startDate = startDate
			},
			handleEndDateChange(endDate) {
				this.detail.time.endDate = endDate
			},
			//提交兼职期望
			handleSubmitData() {
				let _this = this,
					params = this.detail;
				params.moreDemand = _this.moreDemand;

				this.$verification(params, _this.rules, (e) => {
					if (e) {
						if (this.$moment(params.time.startDate).isAfter(params.time.endDate)) {
							return uni.showToast({
								title: '开始时间应在结束时间之前',
								icon: 'none',
								duration: 1500,
								mask: true,
							});
						}
						params.type = params.type == 0 ? 2 : 3;
						params.s_salary = 0;
						params.e_salary = 0;
						params.s_time = params.time.startDate;
						params.e_time = params.time.endDate;
						params.describe = _this.moreDemand;
						this.$loading.show('操作中')
						setExpectDtlInfo(params).then(res => {
							if (res.code == 1) {
								this.$loading.hide()
								uni.showToast({
									title: _this.id ? '修改成功' : '提交成功',
									icon: 'success'
								})
								setTimeout(() => {
									let pages = getCurrentPages();
									if (pages.length > 1) {
										//上一个页面实例对象 
										let prePage = pages[pages.length - 2];
										//关键在这里,这里面是触发上个界面的方法 
										prePage.$vm.getFreeDtlInfo() // 123
									}
									uni.navigateBack({
										delta: 1 // delta: 1返回上一级（A 页面）    delta: 2返回上两级
									})
								}, 2000)
							}
						})
					}
				})
			},
			/**
			 * 日历控件绑定函数 
			 * 点击日期返回
			 */
			onPickerChange(e) {
				let name = e.currentTarget.dataset.name,
					dateString = e.detail.dateString
				this.detail.time[name] = dateString
			},
			switch1Change(e) {
				this.detail.type = e.detail.value
			},
			handleSendTxt(e) {
				let key = e.currentTarget.dataset.key;
				uni.setStorageSync(key, this[key])
			},
			//输入框公共数据绑定方法
			inputUpdateDataFn(e) {
				this.detail.salary = e.detail.value
			},
		}
	}
</script>

<style lang="less">
	.job-dtl-box {
		padding: 0 30rpx 0;
	}

	.tips-txt {
		color: #989898;
	}

	.dtl-box {
		margin-top: 22rpx;
	}

	.job-box {
		padding: 38rpx 0 0;
		box-shadow: 0 1rpx 0.5rpx -1rpx #CCCCCC;

		.tit {
			font-size: 24rpx;
			line-height: 24rpx;
		}

		.txt-view {
			display: inline-block;
			width: 90%;
		}
	}

	.job-box navigator,
	.job-box .dtl-input-box {
		font-size: 30rpx;
		line-height: 30rpx;
		padding-top: 18rpx;
		padding-bottom: 38rpx;
	}

	.dtl-time-box {
		font-size: 26rpx;
		line-height: 30rpx;
		padding-top: 18rpx;
		padding-bottom: 38rpx;

		view {
			display: inline-block;
			width: 280rpx;
			text-align: center;
		}
	}

	.iconxiayibu {
		font-size: 24rpx;
		color: #999;
	}

	.jiange {
		display: inline-block;
		width: 120rpx;
		text-align: center;
	}

	/*swtich整体大小及背景色*/
	.wx-switch-input {
		width: 82rpx !important;
		height: 38rpx !important;
		background: #50D2C2 !important;
		border: 1rpx solid#50d2c2 !important;
		/* 2018-07-18 重置开关边框颜色 */
		border-radius: 38rpx;

		&::after {
			width: 40rpx !important;
			height: 36rpx !important;
		}

		&::before {
			width: 80rpx !important;
			height: 36rpx !important;
		}
	}
</style>
